<template>
  <div class="analys-box">
    <div v-if="bigDataAnalysis.isExpired"
         class="expand-mark">
      <img :src="require('@/static/images/overdue.png')" />
    </div>
    <div>
      <div class="period">
        <div> 有效期：<span class="text-color">{{bigDataAnalysis.validFromDate}}</span> 至 <span class="text-color">{{bigDataAnalysis.validToDate}}</span> </div>
      </div>
      <div>
        <div>子公司数：<span class="text-color">{{bigDataAnalysis.usedAmount}}</span>/{{bigDataAnalysis.amount}}</div>
        <el-button type="primary"
                   class="btn"
                   @click="goBigDataApply">申请加入</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppreciateAnalyse',
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    bigDataAnalysis () {
      return this.value || {}
    }
  },
  methods: {
    goBigDataApply () {
      this.$emit('goBigDataApply')
    }
  }
}
</script>

<style scoped>
.analys-box {
  font-size: 16px;
}
.expand-mark {
  position: absolute;
  top: 0;
  right: 0;
}
.period {
  position: absolute;
  top: 50%;
}
.count {
  position: absolute;
  bottom: 20px;
}
.btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.text-color {
  color: #eb662b;
}
</style>